<template>
	<view class="cotainer">
		<view class="object">
			<view class="recharge-object">充值对象</view>
			<view class="recharge-people">
				<text>学/工号</text>
				<text>920230701</text>
			</view>
			<view class="divider"></view>
			<view class="recharge-people">
				<text>姓名</text>
				<text>庄昭栋</text>
			</view>
		</view>
		<view class="about">
			<view class="about-message">相关信息</view>
		</view>
		<view class="project">
			<view>
				<view class="project-type">
					<text>充值项目</text>
					<text>热水充值</text>
				</view>
				<view class="divider"></view>
			</view>
			<view class="recharge-select">
				<view class="recharge-body">
					<view v-for="(item, index) in number" :key="index"
						:class="['recharge-number', item.selected ? 'selected' : '']" @click="selectPrice(item, index)">
						{{ item.price }}
					</view>
				</view>
			</view>
			<view>
				<view class="divider"></view>
				<view class="recharge-money">
					<text>充值金额</text>
					<text>{{ select }}</text>
				</view>
				<view class="divider"></view>
				<view class="recharge-way">
					<text>充值方式</text>
					<text>微信</text>
				</view>
			</view>
		</view>
		<button class="btn" @click="confirmRecharge">确认充值</button>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				number: [{
						id: 0,
						price: 50,
						selected: false
					},
					{
						id: 1,
						price: 100,
						selected: false
					},
					{
						id: 2,
						price: 150,
						selected: false
					},
					{
						id: 3,
						price: 200,
						selected: false
					},
				],
				select: '',
			};
		},
		methods: {
			selectPrice(item, index) {
				this.number.forEach((el) => {
					el.selected = false;
				});
				this.number[index].selected = true;
				this.select = item.price;
			},
			confirmRecharge() {
				const selectedItem = this.number.find((item) => item.selected);
				if (!selectedItem) {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none',
					});
					return;
				}
				const rechargeAmount = selectedItem.price;
				const token = uni.getStorageSync('token')
				console.log(token)
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res.code) {
							console.log('获取到的 code: ' + res.code);
							const ss_mc = uni.getStorageSync('SS_MC')
							const userId = uni.getStorageSync('userId')
							ajax('/api/wxpay/hotwatermeterpaywx', 'POST', {
									code: res.code,
									total_fee: rechargeAmount,
									ss_mc: ss_mc,
									userId: userId,
								}).then(data => {
									console.log(data.msg)
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: String(data.msg.TimeStamp),
										nonceStr: data.msg.nonce_str,
										package: "prepay_id=" + data.msg.responseObject
											.xml.prepay_id._cdata + "",
										signType: 'MD5',
										paySign: data.msg.sign,
										success: function(res) {
											console.log('success:' + JSON.stringify(
												res));
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								})
								.catch(error => {
									// 处理请求失败的情况
									console.error('请求失败:', error);
								});



						} else {
							console.log('登录失败！' + res.errMsg);
						}
					},
					fail: function(err) {
						console.log('调用登录接口失败', err);
					}
				});




				// ajax('', 'POST', {

				//   },
				// ).then((res) => {
				//   uni.requestPayment({
				//     provider: 'wxpay',
				//     timeStamp: String(Date.now()),
				//     nonceStr: 'A1B2C3D4E5',
				//     package: 'prepay_id=wx20180101abcdefg',
				//     signType: 'MD5',
				//     paySign: '',
				//     success: function(res) {
				//       console.log('success:' + JSON.stringify(res));
				//     },
				//     fail: function(err) {
				//       console.log('fail:' + JSON.stringify(err));
				//     }
				//   });
				// }).catch((error) => {
				//   // 处理错误  
				//   console.error(error);
				// });

			},
			clearSelection() {
				this.number.forEach((item) => {
					item.selected = false;
				});
			},
			onLoad(options) {
				// 页面加载时的逻辑
			},
		},
	};
</script>
<style scoped>
	body {
		margin: 0;
	}

	.cotainer {
		display: flex;
		flex-direction: column;
		height: 120vh;
		background: #f0e8e8;
	}

	.object {
		background: #fff;
		padding: 10px;
	}

	.object .recharge-object {
		border-left: 4px solid green;
		padding-left: 10px;
	}

	.object .recharge-people {
		margin: 10px;
		display: flex;
		justify-content: space-between;
	}

	.about {
		margin: 3% 0;
		background: #fff;
		padding: 10px;
	}

	.about-message {
		border-left: 4px solid green;
		padding-left: 10px;
	}

	.project {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 10px;
		height: auto;
		justify-content: space-around;
	}

	.project .project-type {
		display: flex;
		justify-content: space-between;
		margin: 10rpx auto;
	}

	.project .recharge-select {
		width: 100%;
		height: auto;
	}

	.project .recharge-select .recharge-body {
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 90%;
		flex-wrap: wrap;
	}

	.project .recharge-select .recharge-body .recharge-number {
		width: 29%;
		height: 50px;
		margin: 5px;
		border: 0.5px solid #e2e0e0;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.selected {
		background-color: rgb(68, 207, 68);
		color: white;
	}

	.project .recharge-money {
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.project .recharge-way {
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.btn {
		display: flex;
		justify-content: center;
		margin: 10% auto;
		width: 70%;
		border-radius: 5px;
		align-items: center;
		height: 5%;
		background: rgb(68, 207, 68);
		color: #fff;
		box-sizing: border-box;
		cursor: pointer;
	}

	.divider {
		border: 0.5px solid #e2e0e0;
	}
</style>